<template>
  <aside class="outline-box">
    <h2>基础</h2>
    <ol>
      <li><router-link to="/vue3/hello-setup">认识setup函数</router-link></li>
      <li><router-link to="/vue3/hello-ref">ref</router-link></li>
      <li><router-link to="/vue3/hello-reactive">reactive</router-link></li>
      <li><router-link to="/vue3/list-load">列表加载</router-link></li>
      <li><router-link to="/vue3/hello-toref">toRef</router-link></li>
      <li><router-link to="/vue3/hello-torefs">toRefs</router-link></li>
      <li><router-link to="/vue3/hello-computed">computed</router-link></li>
      <li><router-link to="/vue3/get-dom">获取DOM</router-link></li>
      <li>
        <router-link to="/vue3/hello-watch">WatchEffect和Watch</router-link>
      </li>
    </ol>
    <h2>组件</h2>
    <ol>
      <li><router-link to="/vue3/hello-component">父传子</router-link></li>
      <li><router-link to="/vue3/sub-to-parent">子传父</router-link></li>
      <li><router-link to="/vue3/life-hook">生命周期钩子函数</router-link></li>    
    </ol>
    <h2>setup语法糖</h2>
    <ol>
      <li><router-link to="/vue3/hello-setup2">setup语法糖</router-link></li>
      <li><router-link to="/vue3/hello-store">状态管理</router-link></li>
      <li><router-link to="/vue3/hello-router/Hydra/35">路由</router-link></li>
      <li><router-link to="/vue3/setup-homework">作业</router-link></li>
    </ol>
    <h2>复习</h2>
    <ol>
      <li><router-link to="/vue3/lession1">父传子</router-link></li>
      <li><router-link to="/vue3/lession2">自定义组件的v-model</router-link></li>
      <li><router-link to="/vue3/lession3">动态组件与keep-alive</router-link></li>
      <li><router-link to="/vue3/lession4">路由配置&路由参数</router-link></li>
      <li><router-link to="/vue3/lession5">Vuex</router-link></li>
    </ol>
  </aside>
</template>

<script>
export default {};
</script>

<style scoped>
.outline-box {
  width: 200px;
}

.outline-box > li {
  list-style: decimal;
  line-height: 24px;
  height: 24px;
}
</style>